<template>
  <div id="home">
    <header>
      <button style="float: right;" @click="exit">退出</button>
    </header>
    <main>
      <aside>
        <ul style="list-style: none">
          <li v-for="(item, index) in menusArr" :key="index">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </li>
        </ul>
      </aside>
      <article>
        <router-view></router-view>
      </article>
    </main>
  </div>
</template>

<script>
import menus from '../config/menus';
import { MENUS } from '../config/constants'

export default {
  data() {
    return {
      menusArr: [],
    };
  },

  created() {
    // menus 中存入所有路由，根据权限拿取不同路由
    console.log('页面菜单', menus);
    const menusKey = JSON.parse(localStorage.getItem(MENUS));
    menus.forEach((item) => {
      if (item.key && menusKey.includes(item.key)) {
        this.menusArr.push(item);
      }
    })
  },

  methods: {
    exit() {
      this.$router.push('/login');
      location.reload();
    }
  }
}

</script>

<style>
#home {
  height: 100vh;
}

header {
  background: #f4f4f5;
  height: 70px;
}

main {
  display: flex;
  height: 100%;
}

aside {
  width: 150px;
  background: gray;
  height: 100%;
}

article {
  flex: 1;
}
</style>